import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { ProCard, ProDescriptions,ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, message, Space,Image, Popconfirm} from 'antd';
import { useState,useRef } from 'react';
import { reqUserList, reqDeleteUser } from '@/services/user';
import { TableListData, TableListPagination } from './data';
import { EditModal } from './components/EditModal';

export default () => {

	const [type, setType] = useState('table');
	const [open, setOpen] = useState(false);
	const [iscreated, setIscreated] = useState(true);
	const [isOpen, setIsOpen] = useState<boolean>(false);
	const actionRef = useRef<any>();
	const PopconfirmTitle = `确认删除吗？此操作不可撤销 `;
	const [activeKey, setActiveKey] = useState<any>('1');
	const [row, setRow] = useState<any>();
	const handleModal = (show: boolean, row: any = null) => {
		setRow(row);
		setIsOpen(show);
	}
	const handleTableList = async (params: TableListPagination) => {
		const res = await reqUserList(params);
		if (res.code === 200) {
			const { list, totalCount } = res?.data;
			return {
				data: list,
				success: true,
				total: totalCount,
			};
		}
	};
	const handleEdit = (row: any) => {
		setIsOpen(true);
		setRow(row);
		setIscreated(false);
	}
	const handleDelete = async (id: number) => {
		const res = await reqDeleteUser({ id })
		if (res?.code === 200) {
			message.success(res?.message)
			actionRef?.current.reload()
		}
	}
	const handleCreate = () => {
		setIsOpen(true);setRow({});setIscreated(false);
	}
	const onClose = () => setOpen(false);
	const columns: ProColumns<TableListData>[] = [
		{
			title: '编号',
			dataIndex: 'id',
			ellipsis: true,
			search: false,
		},
		{
			title: '用户名',
			dataIndex: 'username',
			ellipsis: true,
			search: false,
		},
		{
			title: '密码',
			dataIndex: 'password',
			ellipsis: true,
			search: false,
		},
		{
			title: '角色:',
			dataIndex: 'roleid',
			valueEnum:{1: { text: '管理员',},2: { text: '广告发布员',},3: { text: '广告审核员',},},
		},
		{
			title: '操作',
			valueType: 'option',
			dataIndex: 'id',
			width: 180,
			align: 'center',
			render: (text, row) => [
				<Button key='edit' type='link' icon={<FormOutlined />} onClick={() => handleEdit(row)}>编辑</Button>,
				<Popconfirm key='popconfirm' title={PopconfirmTitle} placement='topRight' okText='确定' cancelText='取消' onConfirm={() => handleDelete(row?.id)}><Button key='delete' type='link' icon={<DeleteOutlined />}>删除</Button></Popconfirm>
			],
		},
	];
	return (
		<ProCard>
			<ProTable<TableListData>
				columns={columns}
				type={type as 'table'}
				search={false}
				actionRef={actionRef}
				request={(params): Promise<any> => handleTableList(params)}
				pagination={{pageSize: 10,}}
				rowKey="id"
				dateFormatter="string"
				headerTitle=""
				toolBarRender={() => [
					<Button key="3" type="primary" onClick={handleCreate}><PlusOutlined />
						新建
					</Button>,
					]}
				/>
				{
					isOpen ? <EditModal isOpen={isOpen} handleModal={handleModal} row={row} actionRef={actionRef} activeKey={activeKey} />: null
				}
		</ProCard>
	);
};

